<template>
  <Transition name="fade">
    <div v-if="show" class="loading-container">
      <!-- 加载动画 -->
      <div class="loading-content">
        <div class="loading-spinner">
          <div class="spinner-circle"></div>
          <div class="spinner-circle"></div>
          <div class="spinner-circle"></div>
        </div>
        
        <!-- 加载文本 -->
        <div class="loading-text">
          <p class="text-lg font-medium">{{ text }}</p>
          <p v-if="subText" class="text-sm text-gray-300 mt-1">{{ subText }}</p>
        </div>

        <!-- 进度条 -->
        <div v-if="showProgress" class="progress-container">
          <div class="progress-bar">
            <div 
              class="progress-fill"
              :style="{ width: progress + '%' }"
            ></div>
          </div>
          <span class="progress-text">{{ progress }}%</span>
        </div>
      </div>
    </div>
  </Transition>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  text: {
    type: String,
    default: '加载中...'
  },
  subText: {
    type: String,
    default: ''
  },
  showProgress: {
    type: Boolean,
    default: false
  },
  progress: {
    type: Number,
    default: 0,
    validator: (value) => value >= 0 && value <= 100
  }
})
</script>

<style scoped>
.loading-container {
  @apply fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center;
  backdrop-filter: blur(4px);
}

.loading-content {
  @apply flex flex-col items-center;
}

.loading-spinner {
  @apply relative w-16 h-16 mb-4;
}

.spinner-circle {
  @apply absolute w-full h-full border-4 border-transparent rounded-full;
  border-top-color: #3b82f6;
  animation: spin 1s linear infinite;
}

.spinner-circle:nth-child(2) {
  border-top-color: #60a5fa;
  animation-delay: 0.2s;
}

.spinner-circle:nth-child(3) {
  border-top-color: #93c5fd;
  animation-delay: 0.4s;
}

.loading-text {
  @apply text-center text-white;
}

.progress-container {
  @apply w-48 mt-4;
}

.progress-bar {
  @apply h-2 bg-gray-700 rounded-full overflow-hidden;
}

.progress-fill {
  @apply h-full bg-blue-500 transition-all duration-300 ease-out;
}

.progress-text {
  @apply block text-center text-sm text-gray-300 mt-1;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 淡入淡出动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>